import React, { useEffect, useState } from 'react'
import {HeartOutline  } from 'antd-mobile-icons'
import { Button, Card, Toast } from 'antd-mobile'
import { listIndex } from '../request/api'
function Mylist() {
    let [list, setList] = useState([])
    useEffect(() => {
        listIndex().then(res => {
            console.log('list', res)
            if (res.data.code == 200) {
                setList(res.data.data)
            }
        })
    }, [])
    return (
        <div style={{display:'flex',justifyContent:'space-around',width:'100%',overflow:'scroll'}}>
            {
                // 列表渲染
                list.length > 0 && list.map((item, index) => {
                    return <Card key={index} style={{width:'200px',margin:'0 15px'}}>
                          <div style={{width:'200px',position:'relative'}}>
                            <img style={{width:'90%',height:'60%'}} src={item.image} alt="" />
                            {/* 音乐会 */}
                            <span style={{background:'#eee',width:'60px',height:'30px',lineHeight:'30px',borderRadius:'20px',
                                padding:'0 10px',position:'absolute',top:'2px',left:'5px',zIndex:'9999'}}>音乐会</span>
                                {/* 收藏 */}
                                <span style={{background:'#eee',width:'30px',height:'30px',lineHeight:'30px',borderRadius:'20px',
                               position:'absolute',top:'2px',right:'20px',zIndex:'9999',justifyContent:'center'}}><HeartOutline /></span>

                            <div style={{display:'flex',marginTop:'10px',justifyContent:'space-between', width:'80%'}}>
                                 <p>{item.title}</p>
                                 <span style={{background:'#eee',width:'55px',height:'30px',lineHeight:'30px',borderRadius:'20px',
                                padding:'0 10px',color: '#7d39dcff' }}>{`￥${item.price}`}</span>
                            </div>
                            {/* 头像 */}
                            <div style={{display:'flex',alignItems:'center'}}>
                                 <img style={{width:'30px',height:'30px',borderRadius:'50%'}} src={item.image} alt="" /><span >kako</span>
                            </div>
                          
                           {/* 下边栏 */}
                            <div style={{display:'flex',marginTop:'10px',justifyContent:'space-between',
                                width:'80%',borderTop:'1px solid #ccc'}}>
                                <span>182参与者</span>
                                 <span style={{color:'#ccc'}}>2024-2-11</span>
                            </div>
                          </div>
                         </Card>
                })
            }

        </div>
    )
}

export default Mylist
